<template lang='pug'>
  .mask(v-show="shareMaskShow", @click="handleValue(false)")
    img(src="~/assets/image/arrow.jpg" aria-hidden="true")
    .mask-content(role="group" tabindex="3")
      pre
        b 第1步：
        br
        | 点击屏幕右上角的更多按钮符号<br/>
        br
        b 第2步：
        br
        |选择 “
        van-icon.icon(name="mdi-share mdi")
        //- span.mdi.mdi-share(aria-hidden="true")
        | &nbsp;发送给朋友”
        br
        | 或者 “
        van-icon.icon(name="mdi-camera-iris mdi")
        //- span.mdi.mdi-camera-iris(aria-hidden="true")
        | &nbsp;分享到朋友圈”
</template>

<script type='text/ecmascript-6'>
  export default {
    props: {
      value: Boolean
    },
    data () {
      return {
        shareMaskShow: this.value
      }
    },
    watch: {
      value: {
        handler: function (val) {
          this.shareMaskShow = val
        },
        immediate: true
      }
    },
    methods: {
      handleValue(bol) {
        this.shareMaskShow = bol
        this.$emit('input', bol)
      }
    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
  .mask
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    z-index 99999
    background rgba(0,0,0,.8)
    color: #fff
    img
      max-width 100%
      width: 20rem
      float: right
    b
      color: #e6a200
      font-weight: 700
    .mask-content
      padding: 10px 1rem 0
      clear right
      line-height: 1.5
      font-size: $font-size-large
 
</style>
